<template>
	<view>

		<view class="pages_wrap">

			<view class="box_on_wrap">
				<view class="box_on_title">
					<view>1.上传截图认证</view>
					<view @click="lookshili(1)">如何截图？</view>
				</view>
				<view class="tishi_box">
					<text>打开{{platformData.label}}，点开【我的】页面，进行截图保存至相册，并返回此处上传</text>
				</view>
				<view class="upload_box">
					<u-upload ref="uploadnoe" :deletable="true" :action="action" :header="headers" :form-data="formData"
						name="file" :file-list="fileList1" max-count="1" :before-upload="beforeUpload"
						@on-remove="onRemove1" @on-change="onCchange1"></u-upload>
				</view>
			</view>

			<view class="box_on_wrap">
				<view class="box_on_title">
					<view>2.个人信息</view>
					<view @click="lookshili(2)" v-if="platformData.value == 1">如何获取链接？</view>
				</view>
				<view class="input_box" v-if="platformData.value == 1">
					<u-input v-model="Urllink" type="text" :border="false" placeholder="请将链接复制到此处" />
				</view>
				<view class="input_box">
					<u-input v-model="fans" type="text" :border="false" placeholder="粉丝数量" />
				</view>
				<view class="input_box">
					<u-input v-model="likes" type="text" :border="false" placeholder="获赞数量" />
				</view>
				<view class="input_box">
					<u-input v-model="account" type="text" :border="false" :placeholder="platformData.label + '账号'" />
				</view>
			</view>

		</view>

		<view class="bottom-btn-wrap" @click="Tijiao()">
			<view class="bottom-fixed-btn">
				<view class="btn pay">提交认证</view>
			</view>
		</view>
		
		
		
		<u-popup v-model="steuptfour_Popup" mode="center" width="584" height="80%" border-radius="20" :closeable="true" :mask-close-able="false">
			<view class="tc_wrap">
				<view class="tc_info">
					<image class="gif_tu" :src="chakanshilie" mode="widthFix"></image>
				</view>
				<view class="tc_btn_box">
					<view class="lijipay">
						<u-button hover-class="none" type="info" shape="circle" :ripple="true" @click="steuptfour_Popup = false">我知道了</u-button>
					</view>
				</view>
			</view>
		</u-popup>
		
		

	</view>
</template>

<script>
	const app = getApp();
	import store from '@/public/store.js'
	export default {
		data() {
			return {
				BestImgUrl: app.globalData.imgurl,
				Urllink: '',
				fans: '',
				likes: '',
				account: '',

				action: store.state.baseUrl + '/api/userCertified/uploadAccountScreenshot',
				headers: {
					'authorization': uni.getStorageSync('token')
				},
				formData: {},
				fileList1: [],
				images1: '', //已上传截图
				platformData: {},
				steuptfour_Popup: false,
				chakanshilie: '',
				LaiYuan: 0
			}
		},
		onLoad(ops) {
			let Details = JSON.parse(decodeURIComponent(ops.data));
			this.platformData = Details
			console.log('平台数据', Details)
			uni.setNavigationBarTitle({
				title: Details.label + '认证'
			});
			
			let laiyuan = ops.LaiYuan
			if(laiyuan && laiyuan == 1){
				this.LaiYuan = laiyuan
			}
			
		},
		methods: {
			lookshili(type){
				//this.steuptfour_Popup = true
				if(type==1){
					this.chakanshilie = this.platformData.screenshot_example
					
					uni.navigateTo({
						url: '/subpackageB/pages/RuheJieTu/RuheJieTu?tupian=' +  this.platformData.screenshot_example
					})
					
				} else if(type==2){
					this.chakanshilie = this.platformData.url_example
					
					uni.navigateTo({
						url: '/subpackageB/pages/RuheJieTu/RuheJieTu?tupian=' + this.platformData.url_example
					})
				}
			},
			beforeUpload(index, list) {
				console.log('上传前回调', index, list);
				uni.showLoading({
					title: '上传中...'
				});
			},
			//订单号和下单时间上传回调
			onCchange1(e) {
				let that = this
				uni.hideLoading();
				let resuleok = JSON.parse(e.data)
				console.log('上传截图', resuleok)
				that.images1 = resuleok.result.show_path

				that.account = resuleok.result.account
				that.fans = resuleok.result.fans
				that.likes = resuleok.result.likes

			},
			onRemove1(e) {
				this.images1 = ''
			},
			Tijiao() {
				let that = this
				if (that.images1 == '') {
					uni.showToast({
						title: '请上传截图',
						icon: 'none',
						duration: 3000
					})
				} else if (that.platformData.value == 1 && that.Urllink == '') {
					uni.showToast({
						title: '请输入链接',
						icon: 'none',
						duration: 3000
					})
				} else if (that.fans == '') {
					uni.showToast({
						title: '请输入粉丝数量',
						icon: 'none',
						duration: 3000
					})
				} else if (that.likes == '') {
					uni.showToast({
						title: '请输入获赞数量',
						icon: 'none',
						duration: 3000
					})
				} else if (that.account == '') {
					uni.showToast({
						title: '请输入平台账号',
						icon: 'none',
						duration: 3000
					})
				} else {
					that.$api.userCertifiedsubmit({
						platform_type: this.platformData.value, //平台类型：1小红书 2抖音 3大众点评 4美团
						fans: that.fans, //粉丝数量
						likes: that.likes, //获赞数
						account: that.account, //认证账号
						image: that.images1
					}).then(res => {
						console.log('提交', res.data.result);
						uni.showToast({
							title: res.data.msg,
							icon: 'none',
							duration: 4000
						});
						
						if(this.LaiYuan == 1){
							uni.navigateBack({
								delta: 2
							})
						} else {
							uni.navigateBack()
						}
						
					}).catch(err => {
						uni.showToast({
							title: err.data.msg,
							icon: 'none',
							duration: 4000
						});
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F4F4F4;
	}

	.pages_wrap {
		padding: 30rpx;
	}

	.box_on_wrap {
		padding: 30rpx;
		border-radius: 24rpx;
		background-color: #FFFFFF;
		margin-bottom: 30rpx;

		.box_on_title {
			display: flex;
			align-items: center;
			justify-content: space-between;

			view:nth-child(1) {
				color: $zzy-text-color-333333;
				font-size: 32rpx;
				font-weight: bold;
			}

			view:nth-child(2) {
				color: #FF4E0D;
				font-size: 24rpx;
			}
		}

		.tishi_box {
			margin-top: 20rpx;
			text-align: left;
			border-radius: 10rpx;
			padding: 24rpx;
			background-color: #FFEDE7;
			color: #FF4E0D;
			font-size: 24rpx;
		}

		.upload_box {
			margin-top: 20rpx;
			position: relative;
			left: -10rpx;
		}

		.input_box {
			margin-top: 20rpx;
			border-radius: 200rpx;
			border: 1px solid #D9D9D9;
			padding: 4rpx 24rpx;
			background-color: #F9F9F9;
		}
	}

	.tc_wrap {
		//padding: 30rpx;
		text-align: center;

		.guanyu_title {
			font-size: 30rpx;
			font-weight: bold;
			margin-bottom: 10rpx;
		}

		.wenan {
			color: #999;
			margin-bottom: 20rpx;
		}

		.tc_images {
			image {
				width: 300rpx;
				height: 300rpx;
			}
		}

		.steup_info {
			text-align: left;
			margin-top: 30rpx;

			.yqoiu {
				view:nth-child(1) {
					color: #666;
				}
			}

			.yqoiu2 {
				color: #666;

				span {
					color: #FE7B20;
				}
			}
		}

		.tc_info {
			view:nth-child(1) {
				font-weight: bold;
				font-size: 28rpx;
				margin-bottom: 20rpx;
			}

			view:nth-child(2) {
				font-size: 28rpx;
				color: #999;

				span {
					color: #FF611E;
				}
			}

			.gif_tu {
				width: 100%;
				//height: 524rpx;
				border-radius: 20rpx;
			}
		}

		.tc_btn_box {
			display: flex;
			align-items: center;
			//margin-top: 36rpx;
			justify-content: center;
			padding: 0 30rpx;

			.tc_btn_huise {
				flex: 1;
				margin-right: 12rpx;
				background: linear-gradient(to right, #F7F7F7, 50%, #F7F7F7);
				border-radius: 200rpx;
				padding: 0 0;
				height: 80rpx !important;
				line-height: 80rpx !important;
				text-align: center;
				color: #333333;
			}

			.tc_btn_huise_err {
				flex: 1;
				background-image: linear-gradient(to right, #FE9400, #FF3D22) !important;
				color: #fff;
				border-radius: 200rpx;
				padding: 0 0;
				height: 80rpx !important;
				line-height: 80rpx !important;
				text-align: center;
			}

			.lijipay1 {
				flex: 1;
				position: relative;
				width: 288rpx;
				margin: 0 20rpx 0 0;

				.u-size-default {
					height: 80rpx !important;
					line-height: 80rpx !important;
					background: linear-gradient(to right, #F7F7F7, 50%, #F7F7F7) !important;
					color: #333;
				}
			}

			.lijipay {
				flex: 1;
				position: relative;
				width: 288rpx;
				margin: 30rpx auto;

				.u-size-default {
					height: 80rpx !important;
					line-height: 80rpx !important;
					background-image: linear-gradient(to right, #FE9400, #FF3D22) !important;
					color: #fff;
				}
			}
		}
	}
</style>